<script setup lang="ts">
import scBpmn from "./components/BpmnViewer.vue"
import { ref, reactive } from "vue"
const bpmnXml = {
  nodeData: [
    {
      key: "Event_1fxfae8",
      completed: true,
    },
    {
      key: "Flow_03aqggz",
      completed: true,
    },
    {
      key: "Flow_0ynska1",
      completed: true,
    },
    {
      key: "Flow_1he1159",
      completed: true,
    },
    {
      key: "Activity_0p5dh8r",
      completed: false,
    },
  ],
  xmlData:
    '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.flowable.org/processdef" id="diagram_Process_1666925398466">\n  <process id="ORDER" name="订单申请" isExecutable="true" xmlns:flowable="http://flowable.org/bpmn" flowable:processCategory="ORDER">\n    <documentation>订单申请流程</documentation>\n    <startEvent id="Event_1fxfae8" name="开始" flowable:initiator="startUserId"></startEvent>\n    <sequenceFlow id="Flow_03aqggz" sourceRef="Event_1fxfae8" targetRef="Flow_1he1159"></sequenceFlow>\n    <userTask id="Flow_1he1159" name="制单" flowable:assignee="${startUserId}" flowable:skipExpression="${skipNode}"></userTask>\n    <userTask id="Activity_0p5dh8r" name="业务经理审批" flowable:assignee="${assignee}">\n      <multiInstanceLoopCharacteristics isSequential="false" flowable:collection="userList_1743389891760" flowable:elementVariable="assignee">\n        <completionCondition>${ nrOfCompletedInstances &gt; 0 }</completionCondition>\n      </multiInstanceLoopCharacteristics>\n    </userTask>\n    <sequenceFlow id="Flow_0ynska1" sourceRef="Flow_1he1159" targetRef="Activity_0p5dh8r"></sequenceFlow>\n    <exclusiveGateway id="Gateway_186x8p8"></exclusiveGateway>\n    <sequenceFlow id="Flow_0764z26" sourceRef="Activity_0p5dh8r" targetRef="Gateway_186x8p8"></sequenceFlow>\n    <userTask id="Activity_04407a2" name="商务经理审批" flowable:assignee="${assignee}"></userTask>\n    <sequenceFlow id="Flow_1adgfy4" sourceRef="Gateway_186x8p8" targetRef="Activity_04407a2">\n      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${prevAssignee==\'61Upp9ax85nVctm5Wwem8D\' }]]></conditionExpression>\n    </sequenceFlow>\n    <userTask id="Activity_19k3b3t" name="商务经理审核" flowable:assignee="${assignee}"></userTask>\n    <sequenceFlow id="Flow_15h8t3j" sourceRef="Gateway_186x8p8" targetRef="Activity_19k3b3t">\n      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${prevAssignee==\'ff8080816ec65d2a016ec6b00f0a00c6\'}]]></conditionExpression>\n    </sequenceFlow>\n    <endEvent id="Event_1vud5oh" name="结束"></endEvent>\n    <sequenceFlow id="Flow_0zxq9u7" sourceRef="Activity_04407a2" targetRef="Event_1vud5oh"></sequenceFlow>\n    <sequenceFlow id="Flow_16gauzp" sourceRef="Activity_19k3b3t" targetRef="Event_1vud5oh"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_ORDER">\n    <bpmndi:BPMNPlane bpmnElement="ORDER" id="BPMNPlane_ORDER">\n      <bpmndi:BPMNShape bpmnElement="Event_1fxfae8" id="BPMNShape_Event_1fxfae8">\n        <omgdc:Bounds height="36.0" width="36.0" x="122.0" y="133.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Flow_1he1159" id="BPMNShape_Flow_1he1159">\n        <omgdc:Bounds height="80.0" width="100.0" x="210.0" y="110.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Activity_0p5dh8r" id="BPMNShape_Activity_0p5dh8r">\n        <omgdc:Bounds height="80.0" width="100.0" x="370.0" y="110.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Gateway_186x8p8" id="BPMNShape_Gateway_186x8p8">\n        <omgdc:Bounds height="50.0" width="50.0" x="535.0" y="125.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Activity_04407a2" id="BPMNShape_Activity_04407a2">\n        <omgdc:Bounds height="80.0" width="100.0" x="650.0" y="110.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Activity_19k3b3t" id="BPMNShape_Activity_19k3b3t">\n        <omgdc:Bounds height="80.0" width="100.0" x="650.0" y="220.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Event_1vud5oh" id="BPMNShape_Event_1vud5oh">\n        <omgdc:Bounds height="36.0" width="36.0" x="822.0" y="132.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement="Flow_03aqggz" id="BPMNEdge_Flow_03aqggz">\n        <omgdi:waypoint x="158.0" y="150.0"></omgdi:waypoint>\n        <omgdi:waypoint x="210.0" y="151.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0ynska1" id="BPMNEdge_Flow_0ynska1">\n        <omgdi:waypoint x="310.0" y="150.0"></omgdi:waypoint>\n        <omgdi:waypoint x="370.0" y="150.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0764z26" id="BPMNEdge_Flow_0764z26">\n        <omgdi:waypoint x="470.0" y="150.0"></omgdi:waypoint>\n        <omgdi:waypoint x="535.0" y="150.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_1adgfy4" id="BPMNEdge_Flow_1adgfy4">\n        <omgdi:waypoint x="585.0" y="150.0"></omgdi:waypoint>\n        <omgdi:waypoint x="650.0" y="150.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_15h8t3j" id="BPMNEdge_Flow_15h8t3j">\n        <omgdi:waypoint x="560.0" y="175.0"></omgdi:waypoint>\n        <omgdi:waypoint x="560.0" y="260.0"></omgdi:waypoint>\n        <omgdi:waypoint x="650.0" y="260.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0zxq9u7" id="BPMNEdge_Flow_0zxq9u7">\n        <omgdi:waypoint x="750.0" y="150.0"></omgdi:waypoint>\n        <omgdi:waypoint x="822.0" y="150.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_16gauzp" id="BPMNEdge_Flow_16gauzp">\n        <omgdi:waypoint x="750.0" y="260.0"></omgdi:waypoint>\n        <omgdi:waypoint x="840.0" y="260.0"></omgdi:waypoint>\n        <omgdi:waypoint x="840.0" y="168.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>',
}

// 流程详情数据（示例）
const processDetail = {
  taskList: [
    {
      taskDefKey: "Flow_1q21jf", // 节点ID
      assigneeName: "张三", // 审批人名称
      completed: true, // 完成状态
      comments: "同意制单", // 审批意见
    },
    {
      taskDefKey: "Flow_12anmwq",
      assigneeName: "李四",
      completed: false,
      comments: "",
    },
  ],
}

// 3. 自定义主题（可选）
const customTheme = {
  completedColor: "#409eff", // 已完成节点颜色
  pendingColor: "#f56c6c", // 待办节点颜色
}

// 4. 节点点击事件处理
const handleNodeClick = (element) => {
  console.log("点击节点:", element)
  // 可在此处调用接口获取节点详细信息
}

const reloadProcess = () => {
  // 重新初始化流程（触发子组件的initFlow方法）
  bpmnRef.value?.initFlow()
}
const bpmnRef = ref()

const customTooltip = (element, detail) => {

  // 根据节点类型返回不同内容
  if (element.type === "bpmn:StartEvent") {
    return `<div class="custom-tip">流程起点</div>`
  }
  if (element.type === "bpmn:UserTask") {
    const task = detail.taskList.find((t) => t.taskDefKey === element.id)
    return `
      <div>${element.name}</div>
      <p>负责人：${task?.assigneeName || "未指派"}</p>
    `
  }
}


/**
 * detail 流程详情数据
 * height 高度（可选，默认继承父组件高度）
 * xml  流程图数据，对象类型应包含nodeData和xmlData
 * showControls 是否显示放大缩小等控制按钮（可选，默认true）
 * theme 自定义主题（可选）
 * node-click 节点点击事件
 * tooltip-formatter 节点提示框格式化函数（可选）
 * showTooltips 是否显示节点提示框（可选，默认true）

 *
 */



</script>

<template>
    <!-- <sc-bpmn :xml="sd" /> -->

    <sc-bpmn ref="bpmnRef" :detail="processDetail" :tooltip-formatter="customTooltip" :xml="bpmnXml" :show-controls="true" :showTooltips="false"
        :theme="customTheme" @node-click="handleNodeClick" />
</template>

<style scoped></style>
